<script setup lang="ts">

interface IProps {
  value?:string | null
}

const props = defineProps<IProps>();

const emit = defineEmits<{(e:'click'):void
}>();

function click() {
  if (!props.value) {
    emit('click');
  }
}

</script>

<template>
  <button class="square" @click="click">
    {{ value }}
  </button>
</template>

<style scoped>
.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

</style>
